<template>
	<view class="personal-card">
		<view :style="`height:${app.globalData.sysInfo.STATUS_BAR_HEIGHT}px`"></view>
		<!-- 主要信息卡片 -->
		<up-card class="u-card-wrap" :show-head="false">
			<template #body>
				<!-- 信息 -->
				<view class="p-info">
					<image class="avatar" :fade-show="true" mode="scaleToFill"
						src="/static/logo.png"></image>
					<view class="right">
						<view class="title">
							<text class="name">{{store.state.user.nickName}}</text>
							<text class="companyname">黄石市凌瑞商贸有限公司</text>
						</view>
						<!-- <view class="icon-btn">
							<up-icon name="scan" color="#ffffff" size="28"></up-icon>
						</view> -->
					</view>
				</view>
				<!-- order -->
				<view class="order-info">
					<view class="item">
						<text class="item-label">今日订单金额</text>
						<text class="item-value">{{store.state.user.todayStat.order_amount}}</text>
					</view>
					<view class="item">
						<text class="item-label">订单数</text>
						<text class="item-value">{{store.state.user.todayStat.order_count}}</text>
					</view>
					<view class="item">
						<text class="item-label">今日实收金额</text>
						<text class="item-value">{{store.state.user.todayStat.received_amount}}</text>
					</view>
				</view>
			</template>
		</up-card>

		<!-- 订单 -->
		<view class="order-box" @click="ToNextPage('/pages/orderSummary')">
			<up-icon name="order" color="#2979ff" size="48"></up-icon>
			<text class="label">单据汇总</text>
			<up-icon class="right" name="arrow-right" color="#2979ff" size="24"></up-icon>
		</view>

		<!-- 功能 -->
		<up-grid class="grid" :border="false" col="4" align="left">
			<up-grid-item @click="ToNextPage(listItem.route)" v-for="(listItem,listIndex) in list"
				:key="listIndex">
				<up-icon :color="listItem.color" :customStyle="{paddingTop:20+'rpx'}"
					:name="listItem.name" :size="36"></up-icon>
				<text class="grid-text">{{listItem.title}}</text>
			</up-grid-item>
		</up-grid>
	</view>
</template>

<script setup>
	import { ref, reactive, watch, nextTick, computed } from 'vue'
	import { onReady, onLoad } from "@dcloudio/uni-app"
	import { useStore } from "vuex";
	const store = useStore();
	const app = getApp()

	onLoad(async () => {
		/* 
			tabBar页面的onLoad只会调用一次，所以不会频繁调用后台
			调用只有两种情况
			1.没有token(未登录) 
			2.token过期，
			这两种情况会报错，捕获错误，跳转到登录页。此逻辑在store里完成
		*/
		// store.dispatch("GetInfo")
		store.dispatch("GetTodayStat")
	})
	// data
	const stats = ref({ // 统计数据
		order_count: 0,
		order_amount: 0,
		received_amount: 0
	})
	const list = reactive([{
			name: 'car',
			title: '车销订单',
			color: '#f9c639',
			route: '/pageCarSale/orderListPage'
		},
		{
			name: 'order',
			title: '调拨订单',
			color: '#60c2ac',
			route: '/pagesTransfer/orderListPage'
		}
	]);

	// grid点击
	const ToNextPage = (router) => {
		uni.navigateTo({
			url: router
		})
	}


	// 查看详情方法
	const viewDetails = () => {
		uni.showToast({
			title: '查看详情',
			icon: 'none'
		})
	}
</script>

<style lang="scss" scoped>
	.u-card-wrap {
		//background-color: $uni-bg-color;
		background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #db2777 100%);

		.order-info {
			display: flex;
			flex-direction: row;
			margin-top: 20rpx;

			.item {
				color: #fff;
				display: flex;
				flex-direction: column;
				flex: 1.5;

				.item-label {}

				.item-value {
					font-size: 36rpx;
				}
			}
		}

		.order-info .item:nth-of-type(2) {
			flex: 1;
		}

		.p-info {
			display: flex;
			flex-direction: row;

			.avatar {
				width: 110rpx;
				height: 110rpx;
				border-radius: 20rpx;
			}

			.right {
				margin-left: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				position: relative;
				flex: 1;

				.title {
					.name {
						display: block;
						color: #ffffff;
						font-size: 36rpx;
						font-weight: bold;
					}

					.companyname {
						display: block;
						margin-top: 10rpx;
						color: #f7f7f7;
						opacity: 0.7;
					}
				}

				.icon-btn {
					display: flex;
					flex-direction: row;
					position: absolute;
					right: 0;

					.btn {
						color: #ffffff;
						font-size: 48rpx;
					}
				}

			}

		}
	}

	.order-box {
		display: flex;
		flex-direction: row;
		margin: 30rpx;
		background-color: #ffffff;
		line-height: 120rpx;
		padding: 0 20rpx 0 20rpx;
		border-radius: 20rpx;

		.label {
			margin-left: 20rpx;
			font-weight: 400;
			font-size: 36rpx;
		}

		.right {
			margin-left: auto;
		}
	}

	.grid {
		margin: 30rpx;
		padding: 0 20rpx 20rpx 20rpx;
		background-color: #fff;
	}
</style>